<template>
    <div>
        <p>列表里面有没有数据：{{ has }}---{{ has2 }}</p>
    </div>

    <div>
        <p>姓名：{{ fullName }}</p>
        
        <button @click="fn">修改姓名</button>
    </div>
</template>

<script setup>
import { computed, ref ,reactive} from 'vue';

//创建一个列表属性
const state = reactive([])

//箭头函数的隐式返回： 可以省略 {} 和 return 关键字。该表达式的计算结果会自动作为函数的返回值。计算属性
    //has接收计算属性   简单的布尔值判断、字符串拼接、数学运算、三元运算符等。
const has2 = computed(() => state.length > 0 ? '有数据' : '没有数据')
//const statusText = computed(() => isLoading.value ? '加载中...' : '加载完成');

//箭头函数的显示返回 ：  计算属性
const has = computed(() => { 
    //必须使用 return 关键字来明确指定计算属性的返回值   适用复杂逻辑
    return state.length > 0 ? '有数据' : '没有数据'
    
})

const fistName = ref('omss')
const lastName = ref('admin')
//computed提供一个get访问器和set设置器  const只能定义变量不能定义修改的数据
let fullName = computed({
    //获取
    get(){
        console.log('fullName get')
        return fistName.value + '-' + lastName.value
    },
    set(newValue){
        console.log('fullName set')
        console.log(newValue)
        //适用解构赋值法：将newValue拆分成两个值
        [fistName.value, lastName.value] = newValue.split('-')
        
    }
})
//定义一个方法函数：
const fn = () => {
    fullName.value = 'new-name'
}


</script>

<style>
    
</style>